<template>
    <el-dialog :title="title" v-model="visible" :width="780" @close="closeAction" destroy-on-close>
        <el-row :gutter="10">
            <el-col :span="8">
                <el-input v-model.trim="searchJobNumber" >
                    <template #prepend>工号</template>
                </el-input>
            </el-col>
            <el-col :span="8">
                <el-input v-model.trim="searchUsername">
                    <template #prepend>姓名</template>
                </el-input>
            </el-col>
            <el-col :span="2">
                <el-button @click="peopleSearchBtn">查询</el-button>
            </el-col>
        </el-row>
        <bydTable ref="table" :apiObj="apiObj" stripe style="width: 100%">
            <el-table-column property="jobnumber" label="工号" width="100" />
            <el-table-column property="username" label="姓名" width="100" />
            <el-table-column property="workPlace" label="地区" min-width="80"/>
            <el-table-column property="factory" label="工厂" min-width="120"/>
            <el-table-column property="department" label="部门" min-width="120"/>
            <el-table-column property="office" label="科室" width="150"/>
            <el-table-column label="操作"  min-width="80">
                <template v-slot="scope">
                    <!-- 选择按钮 -->
                    <el-button @click="handleSelect(scope.row)" size="mini"><el-icon><Check /></el-icon></el-button>
                </template>
            </el-table-column>
        </bydTable>
    </el-dialog>
</template>

<script>
import { Check } from '@element-plus/icons-vue'
export default {
    props: {
        title: String,
        factory: String,
    },
    components:{
        Check
    },
    data() {
        return {
            searchJobNumber: "",
            searchUsername: "",
            apiObj: this.$api.engrave.peopleSearch,
            peopleList: [],
        };
    },
    computed: {
        visible: {
            get() {
                return this.$props.modelValue;
            },
            set(v) {
                this.$emit('update:modelValue', !!v)
            }
        }
    },
    methods : {
        handleSelect(row) {
            this.$emit('selectChange', { ...row });
            this.visible = false;
            this.searchJobNumber = "";
            this.searchUsername = "";
            this.peopleList = [];
        },
        async peopleSearchBtn(){
            if(this.searchJobNumber == "" && this.searchUsername == ""){
                this.$message.error("请输入完整的工号或姓名!")
            }else{
                const params = {}
                if(this.searchJobNumber != ""){
                    params["jobnumber"] = this.searchJobNumber;
                }
                if(this.searchUsername != ""){
                    params["username"] = this.searchUsername;
                }
                this.$refs.table.upData(params);
            }
        },
        closeAction(){
             this.searchJobNumber = "";
             this.searchUsername = "";
        }
    }
}
</script>
